<template>
  <div v-loading="loading" class="editor-container">
    <!-- 富文本编辑区域 -->
      <quill-editor
          ref="myEditor"
          v-model="htmlContent"
          :style="{
            minHeight: height,
            border: '1px solid ' + borderColor,
          }"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @change="onEditorChange($event)"
        ></quill-editor>
  </div>
</template>

<script>
/*eslint-disable*/
import { quillEditor } from 'vue-quill-editor';
import { throttle } from 'loadsh';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  name: 'Editor',
  components: { quillEditor },
  props: {
    title: {
      type: String,
      default: () => '编辑内容',
    },
    height: {
      type: String,
      default: () => '400px',
    },
    defaultHtml: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      borderColor: '#dcdfe6',
      htmlContent: '',
      editorOption: {
        placeholder: '请输入内容....',
        modules: {
          toolbar: [
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ size: ['small', false, 'large', 'huge'] }],
            ['blockquote', 'code-block'],
            [{ align: [] }],
            ['clean'],
          ],
        },
      },
      emitCallBack: null,
      idStr: '', // id随机字符串
      loading: false,
      drawer: false,
      priviewWidth: '750px',
    };
  },
  watch: {
    defaultHtml: {
      immediate: true,
      handler(val) {
        if (val) {
          this.htmlContent = val;
        }
      },
    },
  },
  created() {
        this.emitCallBack = throttle(this.postChangeContent, 300);
    this.idStr = Math.random().toString(36).slice(-8);
  },
  mounted() {},
  methods: {
    onEditorBlur(quill) {},
    postChangeContent(html) {
      this.$emit('changeContent', this.htmlContent);
    },
    onEditorChange({ quill, html, text }) {
      // 内容改变事件
      this.htmlContent = html;
      this.emitCallBack();
    },
  },
};
</script>
<style lang="less" scoped>
.quill-editor {
  ::v-deep {
    p {
      line-height: 30px;

      img {
        display: block;
      }
    }

    .ql-snow .ql-editor img {
      display: block;
    }
  }
}
</style>
